<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">我的团队</view>
		</view>


		<view class="bg_box">
			<view class="bg01"></view>
			<view class="bg_content">

				<view class="nav">
					<view class="navauto">
						<block v-for="(item, index) in menu" :key="index">
							<view class="menu" :data-index="index" @tap="setNavMenu">
								<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
							</view>
						</block>
					</view>
				</view>


				<block v-if="select == 0">
					<view class="rank_box">
						<view class="name_box">
							<view class="avatar">
								<image src="../../static/img01/tx01.png" mode="scaleToFill"></image>
							</view>
							<view class="text_box">
								<view class="name">武夷岩茶</view>
								<view class="text">团队人数: 15人</view>
							</view>
							<view class="menu">
								<image src="../../static/img01/bg10.png" mode="widthFix"></image>
								<view class="t">掌柜</view>
							</view>
						</view>
						<view class="rank_list">
							<view class="list">
								<view class="other">账号</view>
								<view class="other">级别</view>
								<view class="other">团队人数</view>
								<view class="other">加入时间</view>
							</view>
							<block v-for="(item, index) in 6" :key="index">
								<view class="list">
									<view class="other">竹竹肉桂</view>
									<view class="other">客官</view>
									<view class="other">0</view>
									<view class="other">2022/12/01</view>
								</view>
							</block>
						</view>
					</view>

				</block>

				<block v-if="select == 1">
					<view class="nav02">
						<view class="navauto">
							<block v-for="(item, index) in menu02" :key="index">
								<view class="menu" :data-index="index" @tap="setNavMenu02">
									<view class="text" :class="index == select02 ? 'menucolor' : ''">{{ item.text }}</view>
								</view>
							</block>
						</view>
					</view>
					
					<view class="list02">
						<block v-for="(item,index) in list">
							<view class="order">
								<view class="title">
									<view class="no">订单号：2020006623232302</view>
									<view class="name_box">
										<view class="icon iconfont icon-moban"></view>
										<view class="name">竹竹肉桂</view>
									</view>									
								</view>
								<view class="con">
									<image class="c_img" src="../../static/img02/goods.png"></image>
									<view class="c_main">
										<view class="c_m_tit">特级紫红袍茶叶浓香型礼盒装500g（62泡）</view>
										<view class="c_m_money"><view class="txt">￥24.00</view><view class="num">x1</view></view>
									</view>
								</view>
								<view class="msg">
									<view class="price">实付款<label class="p2">￥24.00</label></view>
								</view>
								<view class="menu" v-if="select02 == 0">使用抵用券</view>
								<view class="menu menu02" v-if="select02 == 1">抵用券已抵用</view>
								<!-- <view class="tools">
									<view class="btn b2" data-url="/pages/order/orderDetail" @click="gotopage">查看详情</view>
									<view class="btn b2" v-if="item.status == '0' || item.status == '1'">取消订单</view>
									<view class="btn" v-if="item.status == '0'" data-url="/pages/order/orderDetail" @click="gotopage">去支付</view>
									<view class="btn" v-if="item.status == '1'">提醒发货</view>
									<view class="btn b2" v-if="item.status == '2'" data-url="/pages/order/orderLogistics" @click="gotopage">查看物流</view>
									<view class="btn" v-if="item.status == '2'">确认收货</view>
									<view class="btn b2" v-if="item.status == '4'">删除订单</view>
								</view> -->
							</view>
						</block>
					</view>
					
				</block>
				
			</view>
		</view>
		
		<!-- 优惠劵弹窗 -->
		<view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">选择抵用券</view>
				<block v-for="(item,index) in 3">
					<view class="coupon_list" :data-index="index" @tap="setCoupon">
						<view class="tick_box">
							<view class="text_box">
								<view class="title">无门槛抵用券</view>
								<view class="time">有效期至2022.12.31</view>
							</view>
							<view class="money">
								<view class="r">￥</view>
								<view class="m">300</view>
							</view>
							<view class="tick iconfont icon-dagou" :class="index == selectCoupon ? 'couponcolor' : ''"></view>
						</view>
						<view class="rule"><text>单次可用1张,</text>可用于抵掉团队订单抵消金额</view>
					</view>
				</block>
				<view class="menu">确认使用</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu:true,
				scrrol:false,
				info: '',
				select: 0,
				menu: [{
						text: '团队成员'
					},
					{
						text: '团队订单'
					}
				],
				rank: [

				],
				select02: 0,
				menu02: [{
						text: '全部'
					},
					{
						text: '已抵用'
					}
				],
				list:[{status:'0'},{status:'1'},{status:'2'},{status:'3'},{status:'4'}],
				selectCoupon:0,

	
			};
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
			//that.loadData()
		},
		methods: {
			autoPupu() {
				let that = this;
				that.pupu = !that.pupu;
			},
			setCoupon(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				this.selectCoupon = index;
			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				this.select = index;
			},
			setNavMenu02(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				this.select02 = index;
			},
			loadData() {
				let that = this;
				that.Net._get('user/addresses', {
					per_page: '10',
					page: that.page
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			}



		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},

	};
</script>

<style lang="scss">
	.clear_box {
		height: calc(17vw + var(--status-bar-height));
	}

	page {
		background-color: #E0ECEA !important;
		padding-bottom: 0 !important;
	}

	.header {
		background-color: transparent !important;

	}

	.header .text {
		background-color: transparent !important;
		color: #fff;
	}

	.header .back {
		color: #fff;
	}

	.bg_box .bg01 {
		width: 100%;
		height: calc(75vw + var(--status-bar-height));
		background-color: #024D4F;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 99;
		padding-bottom: 15vw;
	}

	.nav {
		width: 92%;
		margin: 4% auto 0;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		// position: fixed;
		// left: calc(50% - 46%);
		// top: calc(17.5vw + var(--status-bar-height));
		// z-index: 99;
		box-sizing: border-box;
		background-color: #013637;
		border-radius: 4vw;
	}

	.nav .navauto {
		width: 100%;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}

	.nav .navauto .menu {
		width: 50%;
		position: relative;
	}

	.nav .navauto .menu .text {
		font-size: 3.8vw;
		color: #759192;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav02 {
		width: 92%;
		margin: 0 auto;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		box-sizing: border-box;
	}
	
	.nav02 .navauto {
		width: 100%;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav02 .navauto .menu {
		width: 50%;
		position: relative;
	}
	
	.nav02 .navauto .menu .text {
		font-size: 3.8vw;
		color: #759192;
		text-align: center;
		line-height: 13.5vw;
	}


	.menucolor {
		color: #F7DEB5 !important;
		font-weight: bold;
		font-size: 4vw !important;
	}

	.rank_box {
		width: 100%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 4vw;
		box-sizing: border-box;
	}

	.rank_box .name_box {
		width: 100%;
		padding: 4% 4% 0 4%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.rank_box .name_box .avatar {
		width: 16vw;
		height: 16vw;
		border-radius: 50%;
		margin-right: 2vw;
	}

	.rank_box .name_box .avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.rank_box .name_box .text_box {
		flex: 1;
	}

	.rank_box .name_box .text_box .name {
		font-size: 3.8vw;
		color: #333;
	}

	.rank_box .name_box .text_box .text {
		font-size: 3.5vw;
		color: #666666;
		margin-top: 2vw;
	}

	.rank_box .name_box .menu {
		width: 20vw;
		position: relative;
	}

	.rank_box .name_box .menu image {
		width: 100%;
		display: block;
	}

	.rank_box .name_box .menu .t {
		font-size: 3.8vw;
		color: #fff;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rank_list {
		width: 100%;
		margin-top: 4%;
	}

	.rank_list .list {
		width: 100%;
		height: 12vw;
		display: flex;
		align-items: center;
	}


	.rank_list .list .other {
		flex: 1;
		font-size: 3vw;
		color: #555555;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rank_list .list:nth-child(1) {
		background-color: #F7DEB5;
	}

	.rank_list .list:nth-child(1) .other {
		color: #333;
		font-size: 3.5vw;
	}
	
	.list02{
		position: relative;
		z-index: 8;
		display: inline-block;
		width: 100%;
		.order{
			width: 100%;
			background: #ffffff;
			border-radius: 25rpx;
			margin-bottom: 25rpx;
			padding: 25rpx;
			.title{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 5rpx;
				.no{
					flex: 1;
					font-size: 24rpx;
					color: #222222;
				}
				.status{
					font-size: 28rpx;
					color: #D20000;
				}
				.name_box{
					display: flex;
					align-items: center;
					.icon{
						font-size: 3.8vw;
						color: #0DA4AD;
						margin-right: 1vw;
					}
					.name{
						font-size: 3.2vw;
						color: #333;
					}
				}
			}
			.con{
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				.c_img{
					width: 20vw;
					height: 20vw;
					border-radius: 15rpx;
				}
				.c_main{
					flex: 1;
					justify-content: space-between;
					padding-left: 20rpx;
					.c_m_tit{
						font-size: 30rpx;
						font-weight: bold;
						color: #222222;
						overflow:hidden; 
						text-overflow:ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2; 
					}
					.c_m_num{
						font-size: 24rpx;
						color: #999999;
						padding-top: 20rpx;
					}
					.c_m_money{
						width: 100%;
						display: flex;
						align-items: flex-end;
						.txt{
							flex: 1;
							font-size: 5vw;
							color: #D20000;
							font-weight: bold;
							padding-top: 10rpx;
						}
						.num{
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
			}
			.msg{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.m_t1{
					font-size: 26rpx;
					color: #9C9C9C;
				}
				.price{
					padding-left: 10rpx;
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
			.msg2{
				width: 100%;
				border-radius: 10rpx;
				background: #F7F7F7;
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				.m_t2{
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
				.price2{
					padding-left: 25rpx;
					color: #999999;
					font-size: 26rpx;
				}
			}
			.msg,.msg2{
				.p{
					font-weight: bold;
					font-size: 28rpx;
					color: #FD3633;
					padding-left: 10rpx;
				}
				.p2{
					font-weight: bold;
					font-size: 28rpx;
					padding-left: 10rpx;
				}
			}
			.menu{
				width: 100%;
				height: 11vw;
				background-color: #089396;
				border-radius: 11vw;
				text-align: center;
				line-height: 11vw;
				font-size: 3.5vw;
				color: #fff;
				margin-top: 25rpx;
			}
			.menu02{
				background-color: #999;
				color: #fff;
			}
			.tools{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 20rpx;
				.btn:not(:first-of-type){
					margin-left: 20rpx;
				}
				.btn{
					text-align: center;
					min-width: 20vw;
					background: #089396;
					color: #ffffff;
					font-size: 26rpx;
					border-radius: 5vw;
					padding: 0 25rpx;
					line-height: 9vw;
				}
				.b2{
					background: #ffffff;
					border: 1rpx solid #DDDDDD;
					color: #999999;
				}
				.b3{
					background: #ffffff;
					border: 1rpx solid #089396;
					color: #089396;
				}
			}
		}
	}
	
	.scrrolHeader{
		background-color: #024D4F !important;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pupu_box .show_box {
		width: 80%;
		background-color: #E0ECEA;
		border-radius: 4vw;
		padding: 4vw;
		position: relative;
	}
	
	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
	}
	
	.pupu_box .show_box .menu {
		width: 100%;
		height: 12vw;
		border-radius: 12vw;
		text-align: center;
		line-height: 12vw;
		background-color: #089396;
		color: #fff;
		margin-top: 5vw;
		font-size: 4vw;
	}
	
	.coupon_list{
		width: 100%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 3vw 4vw;
		margin-top: 4vw;
	}
	
	.coupon_list .rule{
		font-size: 2.8vw;
		color: #666666;
		margin-top: 3vw;
	}
	
	.coupon_list .rule text{
		color: #FF0B0D;
	}
	
	.coupon_list .tick_box{
		display: flex;
		align-items: center;
		padding: 3vw 0;
		border-bottom: 1px dashed #CBCBCB;
	}
	
	.coupon_list .tick_box .text_box{
		flex: 1;
	}
	
	.coupon_list .tick_box .text_box .title{
		font-size: 4vw;
		color: #333;
		text-align: left;
	}
	
	.coupon_list .tick_box .text_box .time{
		font-size: 3vw;
		color: #999999;
		margin-top: 1vw;
	} 
	
	.coupon_list .tick_box .money{
		display: flex;
		align-items: flex-end;
		color: #FF0B0D;
	}
	
	.coupon_list .tick_box .money .r{
		font-size: 3vw;
		font-weight: bold;
		margin-bottom: 1.5vw;
	}
	
	.coupon_list .tick_box .money .m{
		font-size: 8vw;
		font-weight: bold;
	}
	
	.coupon_list .tick_box .tick{
		width: 5vw;
		height: 5vw;
		border-radius: 50%;
		box-sizing: border-box;
		border: 1px solid #D0D0D0;
		margin-left: 3vw;
		font-size: 5.4vw;
		display: flex;
		align-items: center;
		justify-content: center;
		color: transparent;
	}
	
	.couponcolor{
		border: none !important;
		color: #0DA4AD !important;
	}
</style>